<template>
  <div style="height:100%;" id='disclaimer'>

    <drawer style="height:100%" width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{ background:'rgba(0,0,0,.75)', width: '200px'}">

      <div v-if='pageType!="baoming"' id="x-header">
        <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="project" :transition="headerTransition" @on-click-more="onClickMore">
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>
        </x-header>

        <myflow v-if='pageType!="baoming"' :stepindex=2></myflow>

        <!-- <x-header slot="header"  :left-options="{backText: ''}">set empty back text</x-header> -->

      </div>

      <!-- drawer content -->
      <div id='menu' slot="drawer">

        <group>

          <cell title='目录' @click.native="goAnchor('top')" is-link> </cell>

          <cell :title="data" v-for="(data,index) in list" :key="index" @click.native="goAnchor('#anchor-'+index)" is-link> </cell>

        </group>
      </div>

      <!-- main content -->

      <view-box style="height:100%" ref="viewBox" body-padding-top="140px" body-padding-bottom="50px">
        <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>
        <myflow v-if='pageType=="baoming"' :stepindex=2></myflow>

        <div id="x-header">

        </div>
        <card>
          <div slot="content" class="card-demo-flex card-demo-content01">
            <div id="content">
              <div class="disclaimer_text content" v-html="content">
              </div>
            </div>
          </div>
        </card>

        <Ad v-if='pageType=="baoming"' :page="page"></Ad>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
          <router-view class="router-view"></router-view>
        </transition>

      </view-box>

      <!-- 报名底部 -->
      <div v-if='pageType=="baoming"' class="button_header" id='x-bottom'>

        <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">

          <!-- <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon> -->

          <div slot="overwrite-left">
            <div style="position: relative;top: 3px;" v-if="!checkshow">阅读({{countTime}})

            </div>
            <div v-if="!!checkshow">
              <check-icon :value.sync="isagree"> 阅读并同意 </check-icon>

            </div>

          </div>

          <div slot="right">
            <a class="rightbottom-button" @click='next'>下一步</a>

          </div>

        </x-header>
        <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
      </div>

      <!-- 小程序底部 -->
      <div v-if='pageType!="baoming"' class="button_header" id='x-bottom'>
        <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">

          <!-- <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon> -->

          <div slot="overwrite-left">
            <div style="position: relative;top: 0px;" v-if="!checkshow">阅读({{countTime}})

            </div>
            <div style="position: relative;top: -3px;" v-if="!!checkshow">
              <check-icon :value.sync="isagree"> 阅读并同意 </check-icon>

            </div>

          </div>

          <div slot="right">
            <a class="rightbottom-button" @click='next'>下一步</a>

          </div>

        </x-header>
        <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
      </div>

      <!-- <div id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
          <span slot="overwrite-left">
            <div v-if="!checkshow">阅读({{countTime}})</div>
            <div v-if="!!checkshow">
              <check-icon :value.sync="isagree"> 阅读并同意 </check-icon>
            </div>

          </span>

          <a @click='next' slot="right">下一步/Next</a>

        </x-header>
      </div> -->

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 1; //倒数计时60秒

import Ad from "@/common/components/ad.vue";
import mixin from "@/common/js/mixin.js";
import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import Myflow from "@/common/components/myflow.vue";

import { host } from "@/api/config";

import {
  CheckIcon,
  Scroller,
  XImg,
  Radio,
  ViewBox,
  XHeader,
  Swiper,
  SwiperItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Flexbox,
  FlexboxItem,
  Card,
  Drawer,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber, setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      pageType: "",
      disclaimerID: "",
      project: "",
      raceId: "",
      content: "",
      isagree: false,
      checkshow: false,
      countTime: countTime,
      list: ["赛事简介", "赛事声明"],
      showModeValue: "overlay",
      showPlacementValue: "left",
      drawerVisibility: false,
      showPlacement: "left",
      showPlacementValue: "left",
      demo01_list: [
        {
          url: "javascript:",
          img: "https://static.vux.li/demo/1.jpg",
          title: "2018钦州国际半程马拉松赛暨健康中国马拉松系列赛"
        }
      ]
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {
    if (!window.localStorage.getItem("raceId")) {
      this.$router.push({ path: "/" });
    }
  },
  created() {
    this.pageType = window.localStorage.getItem("pageType");

    this.raceId = window.localStorage.getItem("raceId");
    this.project = window.localStorage.getItem("project");
    this.disclaimerID = window.localStorage.getItem("disclaimerID");

    console.log(this.pageType);

    //setTitle(this.project);

    let _this = this;

    this.axios
      .post(
        `${window.host}page/query`,
        qs.stringify({
          id: this.disclaimerID
        })
      )
      .then(response => {
        if (response.data.code == 200) {
          this.content = response.data.data.content;
          this.name = response.data.data.name;
          this.title = `《${response.data.data.name}》`;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });

    this.countDown();
  },
  mounted() {
 

    if (this.pageType == "baoming") {
      document.querySelector("#vux_view_box_body").style.paddingTop = "0";
      document.querySelector("#myflow").style.position = "static";
    }
  },
  methods: {
    next() {
      if (!this.isagree) {
        // this.$vux.toast.show({
        //   type:'text',
        //   text: "请先阅读免责声明"
        // });
      } else {
        if (window.localStorage.getItem("isTeam") == "true") {
          this.$router.push({ path: "teamlist" });
        } else {
          this.$router.push({ path: "certificate/identity" });
        }
      }
    },
    countDown() {
      let _this = this;
      let countDown = setInterval(function() {
        //console.log(_this.codeMessage)
        if (_this.countTime <= 1) {
          _this.checkshow = true;
          clearInterval(countDown);
          return;
        }
        _this.countTime--;
      }, 1000);
    },
    goAnchor(selector) {
      this.drawerVisibility = false;
      var anchor = this.$el.querySelector(selector);
      document.querySelector("#vux_view_box_body").scrollTop =
        anchor.offsetTop - 60;
    },
    onClickMore() {
      this.drawerVisibility = true;
    },
    onShowModeChange(val) {
      /** hide drawer before changing showMode **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showModeValue = val;
      }, 400);
    },
    onPlacementChange(val) {
      /** hide drawer before changing position **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showPlacementValue = val;
      }, 400);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Ad,
    CheckIcon,
    Myflow,
    Radio,
    ViewBox,
    XHeader,
    Swiper,
    SwiperItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Card,
    Drawer,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#disclaimer #content {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.flexwrapper {
  .flex-demo {
    width: 90%;
    background-clip: padding-box;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 70px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#signup .weui-panel {
  margin-top: 0;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}

#disclaimer .card-demo-flex > div {
  flex: 1;
  text-align: left;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

body {
  background-color: #fbf9fe;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.demo-icon-22 {
  font-family: "vux-demo";
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #f70968;
}
.vux-demo-tabbar
  .weui-tabbar_item.weui-bar__item_on
  .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #f70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0 !important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: "vux-demo"; /* project id 70323 */
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot");
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix")
      format("embedded-opentype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff") format("woff"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf") format("truetype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont")
      format("svg");
}
.demo-icon {
  font-family: "vux-demo";
  font-size: 20px;
  color: #04be02;
}
.demo-icon-big {
  font-size: 28px;
}
.demo-icon:before {
  content: attr(icon);
}
.router-view {
  width: 100%;
  top: 46px;
}

#signup .vux-no-group-title {
  margin-top: 0;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}

.footerBanner {
  margin-bottom: 0px;
}

#content ul li {
  height: 100vh;
}

#myflow {
  width: 100%;
  top: 47px;
  position: absolute;
  background: #fcf9fe;
  z-index: 999;
}

#disclaimer #x-bottom .vux-header .vux-header-left {
  position: absolute;
  top: 17px;
  display: block;
  font-size: 18px;
  line-height: 14px;
  height: 25px;
  overflow: initial;
}

#disclaimer #x-bottom .vux-header .vux-header-title {
  display: block;
  font-size: 18px;
  line-height: 40px;

  overflow: inherit;
}

#disclaimer .vux-check-icon {
  color: white;
  position: relative;
  top: 0px;

  span {
    color: white;
  }
  .weui-icon {
    color: white;
  }
}

#disclaimer .disclaimer_text {
  padding-top: 25px;
  padding-bottom: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

#disclaimer .button.weui-btn,
button.weui-btn {
  margin-top: 10px;
}

#disclaimer .title {
  margin: 10px;
  width: auto;
}

#disclaimer .title .top-title {
  font-weight: 400;
  font-size: 17px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  word-wrap: break-word;
  word-break: break-all;
}

#disclaimer .weui-media-box__info {
  margin-top: 15px;
  padding-bottom: 5px;
  font-size: 13px;
  color: #745e5e;
  line-height: 1em;
  list-style: none;
  overflow: hidden;
}

.weui-media-box__info__meta_extra {
  padding-left: 1em;
  border-left: 1px solid #745e5e;
}

.weui-media-box__info__meta {
  float: left;
  padding-right: 1em;
}

// #disclaimer .content {
//   margin-bottom: 20px;
// }

#disclaimer .content p {
  margin: 10px 0 10px;
  color: #666;
  font-size: 13px;
  line-height: 160%;
  // overflow: hidden;
  // text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // margin: 8px;
}

#disclaimer .content span {
  color: #666;
  font-size: 13px;
  line-height: 160%;
}

#disclaimer .content .imgs {
  width: 100%;
  // height: 100px;
  display: table-cell;
  vertical-align: middle;
  // text-align: center;
  padding: 10px;
}

#disclaimer .content img {
  width: 100%;
}

//h1标签
#disclaimer .content {
  color: #666;
  box-sizing: border-box;
  h1 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 36px;
    margin-bottom: 10px;
  }
  h2 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 30px;
    margin-bottom: 10px;
  }
  h3 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 24px;
    margin-bottom: 10px;
  }
  h4 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 18px;
    margin-bottom: 10px;
  }
  h5 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 14px;
    margin-bottom: 10px;
  }
  h6 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 12px;
    margin-bottom: 10px;
  }
  ol,
  ul {
    color: #666;
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
  }
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  button {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.05);
    &:hover,
    &:focus {
      color: #333;
      text-decoration: none;
      background-position: 0 -15px;
      -webkit-transition: background-position 0.1s linear;
      -moz-transition: background-position 0.1s linear;
      -o-transition: background-position 0.1s linear;
      transition: background-position 0.1s linear;
    }
  }
  a {
    color: #666;
    text-decoration: none;
    line-height: 1.75;
    font-size: 14px;
    &:hover {
      color: #c81623;
    }
    strong {
      font-weight: 700;
    }
  }
}

//表格
#disclaimer .content table {
  margin: 0 auto;
  width: 90%;
  line-height: 40px;
  position: relative;
  // width: 100%;
  border-collapse: collapse;
  background-color: rgb(255, 255, 255);
  display: table;
  text-align: center;
  vertical-align: middle;
}

#disclaimer .content th:nth-of-type(1) {
  border-top: 1px solid #c7c7c7;
}

#disclaimer .content th {
  position: relative;
  border-right: 0;
  border-bottom: 0;
  border: 1px solid #c7c7c7;
  text-align: center;
  font-weight: 500;
  display: table-cell;
  vertical-align: inherit;
}

#disclaimer .content td {
  text-align: center;
  border-right: 1px solid #c7c7c7;
}

#disclaimer .content tr {
  border: 1px solid #c7c7c7;
}

#disclaimer .vux-header .vux-header-right {
  font-size: 18px;
}

#disclaimer #type_baoming {
  img {
    width: 100%;
  }
}
</style>






